//Some HTML code templates

function template_CreateTaskForm(subtask, p_id) {
	var form_template = [
		'<div id="NewTaskFormWrapper">',
		'   <form onreset="removeNewTaskForm()">',
		'       <div class="InputFieldWrapper">',
		'           <input class="CreationFormInputField" type="text" name="title" placeholder="Title">',
		'       </div>',
		'       <div class="CreationFormEditableDiv" contentEditable="true"></div>',
		'       <input class="SubmitButton" type="button" name="create" value="Create" onclick=' + (subtask==true ? '"createSubTask($(this).parent().parent().parent())">' : '"createTask(\''+p_id+'\')">'),
		'       <input class="CancelButton" type="reset" value="Cancel" name="cancel">',
		'   </form>',
		'</div>'
	].join('\n');
	return form_template;
}

function template_RootTaskItem(t_id, title, description) {
	var task_template = [
		'<li id="'+t_id+'">',
		'   <div class="RootTaskTitle">',
		'       <span class="TaskTitleText" onclick="toggleRootTask($(this).parent().parent())">',
		'           ' + title,
		'       </span>',
		'       <span class="RootTaskTitleButtonsWrapper">',
		'           <button class="ToolButton" onclick="insertNewTaskInputFormAfter($(this).parent().parent(), true)">+</button>', //show task creation form
		'           <button class="ToolButton" onclick="alert(\'clicked\')">C</button>', //add comment
		'           <button class="ToolButton" onclick="toggleRootTaskDetails($(this).parent().parent().parent())">D</button>', //show task details
		'           <button class="ToolButton" onclick="enableTaskTitleEditing($(this).parent().parent().parent())">&#9998</button>', //edit
		'           <button class="ToolButton" onclick="deleteTask($(this).parent().parent().parent())">&#10007</button>', //delete
		'       </span>',
		'   </div>',
		'   <div class="RootTaskContent">', //TODO: fix details for the root task
		'       <div class="RootTaskDetails">',
		'           <div class="RootTaskDescription" onkeypress="onKeyPressedInTaskDescriptionField(event, this)">',
		'               <button class="ToolButtonStickToRightTopCorner" onclick="enableTaskDescriptionEditing($(this).parent())">&#9998</button>', //edit
		'               <div class="RootTaskDescriptionText">',
		'                   '+description,
		'               </div>',
		'           </div>',
		'       </div>',
		'       <div class="TasksContainer">',
		'           <ul class="TasksList">',
		'           </ul>',
		'       </div>',
		'   </div>',
		'</li>'
	].join("\n");
	return task_template;
}

function template_SubTaskItem(t_id, title, description) {
	var task_template = [
		'<li id="'+t_id+'">',
		'   <div class="TaskTitle">',
		'       <span class="TaskTitleText" onclick="toggleTask($(this).parent().parent())">',
		'           ' + title,
		'       </span>',
		'       <span class="TaskTitleButtonsWrapper">',
		'           <button class="ToolButton" onclick="insertNewTaskInputFormAfter($(this).parent().parent(), true)">+</button>', //show task creation form
		'           <button class="ToolButton" onclick="alert(\'clicked\')">C</button>', //add comment
		'           <button class="ToolButton" onclick="toggleTaskDetails($(this).parent().parent().parent())">D</button>', //show task details
		'           <button class="ToolButton" onclick="enableTaskTitleEditing($(this).parent().parent().parent())">&#9998</button>', //edit
		'           <button class="ToolButton" onclick="deleteTask($(this).parent().parent().parent())">&#10007</button>', //delete
		'       </span>',
		'   </div>',
		'   <div class="TaskContent">',
		'       <div class="TaskDetails">',
		'           <div class="TaskDescription" onkeypress="onKeyPressedInTaskDescriptionField(event, this)">',
		'               <button class="ToolButtonStickToRightTopCorner" onclick="enableTaskDescriptionEditing($(this).parent())">&#9998</button>', //edit
		'               <div class="TaskDescriptionText">',
		'                   '+description,
		'               </div>',
		'           </div>',
		'       </div>',
		'       <div class="TasksContainer">',
		'           <ul class="TasksList">',
		'           </ul>',
		'       </div>',
		'   </div>',
		'</li>'
	].join("\n");
	return task_template;
}
